html,
body {
    width: 100%;
    // height: 100%;
    overflow: hidden;
    background-color: #F8F8F8 100%;
}

body {
    display: flex;
    flex-direction: column;
    justify-content: space-between;
}

//主题内容区
.cont {
    width: 100%;

    // <!-- 上面的导航--跑步--骑行--课程训练 -->
    .navg {
        width: 100%;
        height: 57px;
        padding: 0px 20px;

        .navg-ct {
            width: 100%;
            height: 100%;
            display: flex;
            padding: 0px 30px;
            justify-content: space-between;
            align-items: center;
            border-bottom: 1px solid #DDDDDD;

            .navgtxt {
                height: 57px;
                line-height: 57px;
                color: rgba(154, 154, 154, 1);
                font-size: 16px;
            }
        }

    }
    // 下面的内容区
    .main{
        width: 100%;
        height: 610px;
        
        // 跑步
        .main-running{
            width: 100%;
            height: 100%;

                //  <!-- go -->
                .go{
                    position: fixed;
                    top: 300px;
                    left: 50%;
                    transform: translateX(-50%);
                    text-align: center;
                    line-height: 190px;
                    width: 190px;
                    font-size:90px ;
                    font-weight: bolder;
                    color: #1592CC;
                    height: 190px;
                    opacity: .7;
                    z-index: 1;
                    border-radius: 50%;
                    background-color: #4294FF;

                }
           
                //   <!-- 目前累积骑行距离: -->
                .now{
                    padding-left: 20px;
                    background-color: #fff;
                    .p1{
                        padding-top: 14px;
    
                    }
                    .distance{
                        width: 100%;
                        height: 64px;
                        .dist{
                            color: #4294FF;
                            font-size: 48px;
                        }
                        .ds{
                            padding-top: 15px;
                            padding-left: 5px;
                        }
    
                    }
                }
                // <!-- 户外跑 燃 脂跑 跑步机 -->
                .ot{
                    width: 100%;
                    position: fixed;
                    top: 200px;
                    padding: 0px 27px;
                    z-index: 2;
                    .outrun{
                        width: 100px;
                        height: 40px;
                        color: #fff;
                        text-align: center;
                        line-height: 40px;
                        background-color: #4294FF;
                        border-radius: 20px;
                    }
                    .fat{
                        width: 100px;
                        height: 40px;
                        color: #fff;
                        text-align: center;
                        line-height: 40px;
                        background-color: #9CBCE2;
                        border-radius: 20px;

                    }
                    .thread{
                        width: 100px;
                        height: 40px;
                        color: #fff;
                        text-align: center;
                        line-height: 40px;
                        background-color: #9CBCE2;
                        border-radius: 20px;

                    }
                }
                // <!-- 地图 -->
                .map{
                    width: 100%;
                    height: 400px;
                    // background-color: red;
                }
                // 路线
                .path{
                    width: 100%;
                    height: 82px;
                    background-color: #fff;
                    // background-color: #4294FF;
                    .pt1{
                        color: #333333;
                        font-size: 18px;
                        padding: 14px 0px;
                    }
                    .pt2{
                        color: #9A9A9A;
                        font-size: 14px;
                    }
                }
                //  <!-- 设置和音乐图标 -->
                .ic{
                    width: 100%;
                    position: fixed;
                    bottom: 220px;
                    padding: 0px 26px;
                    justify-content: space-between;
                  .v1{
                    width: 50px;
                    height: 50px;
                    background-color: #fff;
                    border-radius: 50%;
                    text-align: center;
                    line-height: 50px;
                    .set{
                        font-size: 32px;
    
                    }
                  }
                   .v2{
                    width: 50px;
                    height: 50px;
                    background-color: #fff;
                    border-radius: 50%;
                    text-align: center;
                    line-height: 50px;
                    .mus{
                        font-size: 32px;
    
                    }
                   }
                }
    
            
        }
        // 骑行
        .main-riding{
            width: 100%; 
            height: 100%;
            background-color: #F8F8F8;
              //  <!-- go -->
              .go{
                position: fixed;
                top: 300px;
                left: 50%;
                transform: translateX(-50%);
                text-align: center;
                line-height: 190px;
                width: 190px;
                font-size:90px ;
                font-weight: bolder;
                color: #1592CC;
                height: 190px;
                border-radius: 50%;
                opacity: .7;
                z-index: 1;
                background-color: #4294FF;

            }
            //   <!-- 目前累积骑行距离: -->
            .now{
                padding-left: 20px;
                background-color: #fff;
                .p1{
                    padding-top: 14px;

                }
                .distance{
                    width: 100%;
                    height: 64px;
                    .dist{
                        color: #4294FF;
                        font-size: 48px;
                    }
                    .ds{
                        padding-top: 15px;
                        padding-left: 5px;
                    }

                }
            }
            // <!-- 地图 -->
            .map{
                width: 100%;
                height: 400px;
                // background-color: red;
            }
            // 路线
            .path{
                width: 100%;
                height: 82px;
                background-color: #fff;
                // background-color: #4294FF;
                .pt1{
                    color: #333333;
                    font-size: 18px;
                    padding: 14px 0px;
                }
                .pt2{
                    color: #9A9A9A;
                    font-size: 14px;
                }
            }
            //  <!-- 设置和音乐图标 -->
            .ic{
                width: 100%;
                position: fixed;
                bottom: 220px;
                padding: 0px 26px;
                justify-content: space-between;
              .v1{
                width: 50px;
                height: 50px;
                background-color: #fff;
                border-radius: 50%;
                text-align: center;
                line-height: 50px;
                .set{
                    font-size: 32px;
                }
              }
               .v2{
                width: 50px;
                height: 50px;
                background-color: #fff;
                border-radius: 50%;
                text-align: center;
                line-height: 50px;
                .mus{
                    font-size: 32px;
                }
               }
            }


        }
        // 课程训练
        .main-training{
            width: 100%;
            height: 100%;
            padding: 15px;
            overflow-y: scroll;
            // background-color: orange;
           .ddv1{
            .new-course{
                display: block;
                width: 100%;
               
                
                .txt{
                   padding-bottom: 10px;
                }
                .panl{
                    height: 230px;
                border-radius: 15px;
                overflow: hidden;
              
                
                box-shadow: 0px 0px 8px 0px rgba(0, 0, 0, 0.4);

                    #img1{
                        
                        width: 100%;
                        height: 150px;
                    }
                    .txt2{
                        color: #101010;
                        padding-left: 15px;
                        margin-top: 5px;

                    }
                    .txt3{
                        color: #9A9A9A;
                        font-size: 12px;
                        margin-top: 10px;
                        padding-left: 15px;

                    }
                }
            }
           }
            // 课程
            .course{
                h3{
                    padding-top: 20px;
                    padding-bottom: 10px;
                }
              .dv{
                .course-item{
                    display: block;
                    height: 140px;
                    overflow: hidden;
                    position: relative;
                    margin-bottom: 15px;
                    .img{
                        width: 100%;
                        height: 100%;
                    }
                    .info {
                        position: absolute;
                        color: white;
                        left: 20px;
                        bottom: 20px;
                        .title {
                          font-size: 16px;
                          font-weight: bold;
                          padding-bottom: 7px;
                        }
                        .desc {
                          font-size: 12px;
                        }
                      }

                }
              }
               
            }
        }

    }


}

// 底部导航区
.foot {
    width: 100%;
    height: 70px;
    display: flex;
    // background-color: aqua;
    justify-content: space-between;
    box-shadow: 0px 0px 10px 0px rgba(0, 0, 0, 0.3);

    a {
        width: 25%;
        display: flex;
        flex-direction: column;
        text-align: center;

        span {
            font-size: 45px;
        }

    }


}